// 主要职责: 创建一个Vue应用(理解成之前的根实例)
// 1.导入createApp函数从vue中
// 2.创建一个根组件App.vue 导入至main
// 3.使用createApp创建应用实例
// 4.应用实例挂载到#app容器中


// 总结: 如何创建vue应用实例?
//  通过createApp创建应用实例 --> 扩展功能将来都是在app上运行

import {createApp} from "vue";
// import App from "./App2.0.vue";
// import App from "./App3.0.vue";
import Layout from "./Layout.vue";

// import setColorDirective from "@/components/base/directive.js";
// import loadingDirective from '@/components/base/loading/directive.js'
import setColorDirective from "./components/base/directive.js";
import loadingDirective from "./components/base/loading/directive.js";

import router from "./router";
// 导入全局样式
import './assets/css/common.less'

const app = createApp(Layout);
// vue3.0全局注册自定义指定
app.directive('set-color', setColorDirective)

// vue2.0 Vue.mixin({ 全局混入的选项对象 })
// vue3.0 app.mixin({ 全局混入的选项对象 })

app.mixin({
  mounted() {
    // $el 组合的根元素
    console.log(this.$el, 'dom准备好')
  }
})

app.directive('loading', loadingDirective)
  .use(router)
  .mount("#app")

